<template>
  <div>
    <van-nav-bar title="发布房源" left-arrow @click-left="onClickLeft" />
    <div class="am-list" data-role="rent-list">
      <div class="am-list-header">房源信息</div>
      <div class="am-list-body">
        <!-- 小区名称 -->
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="小区名称"
          placeholder="请输入小区名称"
          @click="cahngetocell"
        />
        <!-- 租金 -->
        <van-field
          v-model="digit"
          type="digit"
          label="租 金"
          placeholder="请输入租金/月"
        />
        <!-- 建筑面积 -->
        <van-field
          v-model="digit"
          type="digit"
          label="建筑面积"
          placeholder="请输入建筑面积"
        />
        <!-- 户型 -->
        <div class="housetype">
          <van-cell title="户型" is-link value="请选择" />
          <van-popup v-model="show" position="bottom" :style="{ height: '40%' }"
            ><van-picker
              show-toolbar
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
          /></van-popup>
        </div>
        <!-- 所在楼层 -->
        <div class="floor">
          <van-field
            readonly
            clickable
            label="所在楼层"
            :value="value"
            is-link
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" round position="bottom">
            <van-picker
              show-toolbar
              :columns="floorcolumns"
              @cancel="showPicker = false"
              @confirm="flooronConfirm"
            />
          </van-popup>
        </div>
        <!-- 朝向 -->
        <div class="direction">
          <van-field
            readonly
            clickable
            label="朝向"
            :value="value"
            is-link
            @click="showPicker = true"
          />
          <van-popup v-model="showPicker" round position="bottom">
            <van-picker
              show-toolbar
              :columns="directioncolumns"
              @cancel="showPicker = false"
              @confirm="directiononConfirm"
            />
          </van-popup>
        </div>
      </div>
    </div>
    <!-- 房屋标题 -->
    <div class="housetitle">
      <div class="van-hairline--bottom">房屋标题</div>
      <van-field
        v-model="value"
        placeholder="请输入标题（例如 整租 小区名 2室 5000元 ）"
      />
    </div>
    <!-- 房屋图像 -->
    <div class="housepircture">
      <div class="van-hairline--bottom">房屋图像</div>
    </div>
    <!-- 房屋配置 -->
    <div class="housedeploy">
      <div class="van-hairline--bottom">房屋配置</div>
    </div>
    <!-- 房屋描述 -->
    <div class="housedescribe">
      <div class="van-hairline--bottom">房屋描述</div>
      <van-field v-model="value" placeholder="请输入房屋描述信息" />
    </div>
    <!-- 按钮 -->
    <div class="am-flexbox Add_bottom__Pir6G am-flexbox-align-center">
      <div class="am-flexbox-item Add_cancel__1f986" @click="cancelBtn">
        取消
      </div>
      <div class="am-flexbox-item Add_confirm__34c_r">提交</div>
    </div>
  </div>
</template>

<script>
// import { Toast } from 'vant'
export default {
  name: 'house-resources',
  props: {},
  components: {},
  data () {
    return {
      fieldValue: '',
      digit: '',
      show: false,
      show1: false,
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      floorcolumns: ['高楼层', '中楼层', '低楼层'],
      housenum: '',
      floorvalue: '',
      value: '',
      showPicker: false,
      directioncolumns: ['东', '南', '西', '北', '东南', '西北', '东北', '西南']
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    showPopup () {
      this.show = true
    },
    flooronConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    directiononConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    cahngetocell () {
      this.$router.push('/cellSearch')
    }
  },
  mounted () {
    this.$dialog
      .alert({
        title: '提示',
        message: '放弃发布房源'
      })
      .then(() => {
        // on confirm
      })
      .catch(() => {
        // on cancel
      })
  },
  watch: {},
  computed: {},
  filters: {}
}
</script>

<style scoped lang="less">
.am-list-body div:not(:last-child) .am-list-line {
  border-bottom: 1px solid #ddd;
}
.am-list-header {
  padding: 15px 15px 9px;
  font-size: 14px;
  color: #888;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
}
.am-list-header {
  color: #21b97a;
  background-color: #fff;
  font-size: 15px;
}
.Add_bottom__Pir6G {
  position: fixed;
  display: flex;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 45px;
  z-index: 1;
  color: #fff;
  font-size: 15px;
  background-color: #fff;
  .am-flexbox .am-flexbox-item {
    box-sizing: border-box;
    flex: 1 1;
    margin-left: 8px;
    min-width: 10px;
  }
  .Add_cancel__1f986 {
    color: #21b97a;
    background-color: #fff;
    height: 100%;
    line-height: 45px;
  }
  .am-flexbox-item {
    box-sizing: border-box;
    flex: 1 1;
    margin-left: 8px;
    min-width: 10px;
  }
  .Add_confirm__34c_r {
    height: 45px;
    line-height: 45px;
    background-color: #21b97a;
  }
}
</style>
